<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>首页</title>
	<link rel="stylesheet" href="js/bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="js/bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
	<link rel="stylesheet" href="js/bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css">
	<link rel="stylesheet" href="js/bower_components/bootstrap-table/dist/bootstrap-table.min.css">
	<link rel="stylesheet" href="js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css">
	<link href="js/bower_components/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

	<script src="js/bower_components/jquery/dist/jquery.min.js"></script>
	<script src="js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="js/bower_components/bootbox.min.js"></script>
	<script src="js/bower_components/bootstrap-select/js/bootstrap-select.js"></script>
	<script src="js/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
	<script src="js/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
	<script src="js/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

	<script src="js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
	<script src="js/bower_components/jquery-form-validator/form-validator/jquery.form-validator.min.js"></script>
	<script src="js/bower_components/moment/min/moment-with-locales.min.js"></script>
	<script src="js/bower_components/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>

	<script>
		var currentTime=function(){
			$("currentTime").html(moment().format("YYYY-MM-DD dddd HH:mm:ss"));
		}

		$(function(){
			setInterval(currentTime,1000);

			User={
				"id":2
			}

			$.ajax({
				type:"put",
				url:"http://localhost:8080/getDaoHang",
				async:true,
				contentType:"application/json;charset=utf-8",
				data:JSON.stringify(User),
				dataType:'json',
				success:function(res){
					console.log("获取后端导航的返回结果：");
					console.log(res);

					$("#tree").treeview({
						data:res,
						selectedBackColor:"#0F3E6E",
						selectedIcon:"glyphicon glyphicon-ok",
						expandIcon:"glyphicon glyphicon-plus",
						onNodeSelected:function(event,data){
							console.log(data);
							var parent=$("#tree").treeview("getNode",data.parentId);
							console.log(parent);
							$("#breadcrumb").html("<li>" + parent.text + "</li>" + "<li>" + data.text + "</li>" );
							$("#contentFrame").attr("src",data.href);
							console.log("=========");
						}
					});
				}
			});
		})

	</script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			word-wrap: break-word;
			font-family: '微软雅黑', sans-serif;
		}

		body {
			background: #000;
			min-height: 200vh;
		}

		header {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			transition: 0.6s;
			padding: 40px 100px;
			z-index: 2;
		}

		header.sticky {
			padding: 5px 100px;
			background: #fff;
		}

		header .logo {
			position: relative;
			font-weight: 700;
			color: #fff;
			text-decoration: none;
			font-size: 2em;
			text-transform: uppercase;
			letter-spacing: 2px;
			transition: 0;
		}

		header ul {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		header ul li {
			position: relative;
			list-style: none;
		}

		header ul li a {
			position: relative;
			margin: 0 15px;
			text-decoration: none;
			color: #fff;
			letter-spacing: 2px;
			font-weight: 500px;
			transition: 0.5s;
		}
		.banner {
			position: relative;
			width: 100%;
			height: 100px;
			background: url();
			background-size: cover;
		}

		header.sticky .logo,
		header.sticky ul li a {
			color: #000;
		}
		#allmap {
			width: 100%;
			height: 500px;
			overflow: hidden;
			margin:0;
			font-family:"微软雅黑";
		}
	</style>
</head>
<body>
<div>
	<header>
		<a href="#" class="logo">Logo</a>
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="login.html">登录</a></li>
			<li><a href="regist.html">注册</a></li>
		</ul>
	</header>
	<section class="banner"></section>
	<script>
		window.addEventListener('scroll', () => {
			let header = document.querySelector('header')
			// 重要属性
			header.classList.toggle('sticky', window.scrollY > 0)
		})
	</script>
</div>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-3">
			<div id="tree"></div>
		</div>
		<div class="col-md-9">
			<div class="row">
				<div class="col-md-12">
					<ol class="breadcrumb" id="breadcrumb">
						<li>
							<a href="#" target="contentFrame">首页</a>
						</li>
					</ol>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="embed-responsive embed-responsive-16by9">
						<iframe name="contentFrame" id="contentFrame" class="embed-responsive-item" src="UserEcharts.html"></iframe>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
